<template>
	<div id="questionsView">
		<el-form :model="searchParams" inline>
			<el-form-item label="题目">
				<el-input v-model="searchParams.title" placeholder="请输入题目名字"></el-input>
			</el-form-item>
			<el-form-item label="标签">
				<el-tag
					style="margin-right: 10px"
					v-model="searchParams.tags"
					v-for="tag in searchParams.tags"
					:key="tag"
					effect="dark"
					size="large"
					:type="'primary'"
					closable
					:disable-transitions="false"
					@close="handleClose(tag)"
				>
					{{ tag }}
				</el-tag>
				<el-input
					v-if="inputVisible"
					ref="InputRef"
					style="width: 100px"
					v-model="inputValue"
					@keyup.enter="handleInputConfirm"
					@blur="handleInputConfirm"
				/>
				<el-button type="success" plain v-else @click="showInput"> + 新的标签 </el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchData">搜索</el-button>
				<el-button type="primary" plain @click="resetData">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" height="65vh">
			<el-table-column width="60" label="序号" type="index" align="center"></el-table-column>
			<template v-for="item in tableColumn" :key="item.prop">
				<template v-if="!item.custom">
					<el-table-column
						:prop="item.prop"
						:label="item.label"
						:align="item.align"
						:show-overflow-tooltip="item.showOverflowTooltip"
					></el-table-column>
				</template>
				<template v-else>
					<el-table-column
						v-if="item.prop === 'operation'"
						:label="item.label"
						:align="item.align"
						:fixed="item.fixed"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<div style="display: flex; justify-content: center">
								<el-button type="text" @click="toQuestionsView(scope.row)"> 做题 </el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'tags'"
						:label="item.label"
						min-width="100"
						:align="item.align"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<el-tag
								v-for="tag in JSON.parse(scope.row.tags)"
								:key="tag"
								style="margin-right: 5px"
								:type="'primary'"
								effect="dark"
								>{{ tag }}</el-tag
							>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'passRate'"
						:label="item.label"
						:align="item.align"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<span
								>{{ (scope.row.thumbNum / scope.row.submitNum) * 100 || 0 }}% ( {{ scope.row.thumbNum }}/{{
									scope.row.submitNum
								}}
								)</span
							>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.prop === 'createTime'"
						:label="item.label"
						:align="item.align"
						:show-overflow-tooltip="item.showOverflowTooltip"
					>
						<template v-slot:default="scope">
							<span>{{ new Date(scope.row.createTime).toLocaleString() }}</span>
						</template>
					</el-table-column>
				</template>
			</template>
		</el-table>
		<div v-if="tableData.length" class="pagination-w">
			<el-pagination
				:total="searchParams.total"
				background
				:current-page="searchParams.current"
				:page-size="searchParams.pageSize"
				:page-sizes="searchParams.pageSizes"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange"
				@current-change="handlePageChange"
			></el-pagination>
		</div>
	</div>
</template>
<script setup>
import { nextTick, onMounted, ref } from "vue";
import { getQuestionList } from "@/api/question";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const tableData = ref([]);
const router = useRouter();
const tableColumn = ref([
	{ prop: "id", label: "题号", align: "center", showOverflowTooltip: true },
	{
		prop: "title",
		label: "题目名字",
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "tags",
		label: "标签",
		align: "center",
		custom: true,
		showOverflowTooltip: true
	},
	{
		prop: "passRate",
		label: "通过率",
		align: "center",
		custom: true,
		showOverflowTooltip: true
	},
	// {
	//   prop: "submitNum",
	//   label: "提交数",
	//   align: "center",
	//   showOverflowTooltip: true,
	// },
	// {
	//   prop: "thumbNum",
	//   label: "通过数",
	//   align: "center",
	//   showOverflowTooltip: true,
	// },
	{
		prop: "createTime",
		label: "创建时间",
		custom: true,
		align: "center",
		showOverflowTooltip: true
	},
	{
		prop: "operation",
		label: "操作",
		align: "center",
		custom: true,
		fixed: "right"
	}
]);
const searchParams = ref({
	title: "",
	tags: [],
	current: 1,
	pageSize: 10,
	pageSizes: [10, 20, 50, 100, 200],
	total: 0
});
const inputValue = ref("");
const inputVisible = ref(false);
const InputRef = ref();
const handleClose = tag => {
	searchParams.value.tags = searchParams.value.tags.filter(t => t !== tag);
};
const showInput = () => {
	inputVisible.value = true;
	nextTick(() => {
		InputRef.value?.focus?.(); // 假设Element Plus的输入框有focus方法
	});
};

const handleInputConfirm = () => {
	if (inputValue.value) {
		searchParams.value.tags.push(inputValue.value);
	}
	inputVisible.value = false;
	inputValue.value = "";
};

const getQuestionListData = async () => {
	const res = await getQuestionList({
		title: searchParams.value.title,
		tags: searchParams.value.tags,
		current: searchParams.value.current,
		pageSize: searchParams.value.pageSize
	});
	if (res.code === 0) {
		tableData.value = res.data.records;
		searchParams.value.total = parseInt(res.data.total) || 0;
	} else {
		ElMessage.error(`加载失败：${res.message || "未知错误"}`);
	}
};
const searchData = () => {
	searchParams.value = {
		...searchParams.value,
		current: 1
	};
	getQuestionListData();
};

const resetData = () => {
	searchParams.value = {
		...searchParams.value,
		title: "",
		tags: []
	};
	getQuestionListData();
};

const handleSizeChange = newSize => {
	searchParams.value.pageSize = newSize;
	getQuestionListData();
};

const handlePageChange = newPage => {
	searchParams.value.current = newPage;
	getQuestionListData();
};

const toQuestionsView = row => {
	router.push({
		path: `/view/question/${row.id}`
	});
};

onMounted(() => {
	getQuestionListData();
});
</script>

<style scoped lang="scss">
#questionsView {
	width: 100%;
	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		margin-bottom: 15px;
	}
	.pagination-w {
		display: flex;
		justify-content: right;
		margin-top: 20px;
	}
}
</style>
